<template>
  <div class='hello'>
    <h1>{{ msg }}</h1>
    <button @click='down_url'>下载测试文件</button>
    <down2
    ref='downer'
    :config=down2_config
    :fields='{uid:0}'
    @load_complete='down2_load_complete'
    @folder_sel='down2_folder_sel'
    @task_create='down2_task_create'
    @down_process='down2_down_process'
    @down_stoped='down2_down_stoped'
    @down_complete='down2_down_complete'
    @down_error='down2_down_error'
    @queue_complete='down2_queue_complete'/>
  </div>
</template>

<script>
import down2 from '@/components/down2'
let api = 'http://localhost:8888/api/down2/'
export default {
  name: 'DownView',
  components: {down2},
  data () {
    return {
      msg: '泽优大文件下载控件（down2） vue3 cli 示例',
      down2_config: {
        License2: '', // 授权码
        UrlCreate: api + 'f_create.aspx',
        UrlPost: api + 'f_post.aspx',
        UrlProcess: api + 'f_process.aspx',
        UrlComplete: api + 'f_complete.aspx',
        UrlDel: api + 'f_del.aspx',
        UrlFdCreate: api + 'fd_create.aspx',
        UrlFdComplete: api + 'fd_complete.aspx',
        UrlFdDel: api + 'fd_del.aspx',
        UrlList: api + 'f_list.aspx',
        FileFilter: '*'
      }
    }
  },
  methods: {
    down_url () {
      var d2 = this.$refs.downer.com
      var f = {
        fileUrl: 'http://www.ncmem.com/images/ico-ftp.jpg',
        fields: { auto: '1' }
      }
      if (d2.Config['Folder'] === '') {
        d2.data.cur = f
        d2.openFolder()
        return
      }

      d2.addUrl(f)
    },
    down2_load_complete (d) {
      // 控件加载完毕
      console.log('控件加载结束')
    },
    down2_folder_sel (dir) {
      // 用户选择下载位置
      console.log('选择下载位置：' + dir)
      var d2 = this.$refs.downer.com
      setTimeout(function () {
        if (d2.data.cur != null) {
          d2.addUrl(d2.data.cur)
          d2.data.cur = null
        }
      }, 100)
    },
    down2_task_create (f) {
      // 添加下载任务
      console.log('添加下载任务')
      var d2 = this.$refs.downer.com
      setTimeout(function () {
        if (f.fields.auto === '1') d2.start_queue()
      }, 300)
    },
    down2_down_process (obj) {
      // 下载进度
      console.log(obj)
    },
    down2_down_stoped (obj) {
      // 下载停止
      console.log(obj)
    },
    down2_down_complete (obj) {
      // 下载完毕
    },
    down2_down_error (obj, err) {
      // 下载错误
    },
    down2_queue_complete () {
      // 队列下载完毕
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
